/* 
* 科技有限公司版权所有（）.
* Copyright (c) 2019, and/or its affiliates. All rights reserved.
* @Date: 2020.09.01 22:47.
* @Author 
* @Description  项目 - 活动装修
**/
<template>
  <div class="pr-renovation">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">

      <el-form-item class="cdn-banner-upload cdn-share" label="登录页图片：" prop="activityInfoPic">
        <el-upload :before-upload="beforeAvatarUploadShare" :http-request="handleHttpClickShare" :on-success="handleAvatarSuccess" :show-file-list="false" action=""
          class="avatar-uploader">
          <img :src="sharePreview" class="pr-preview-login" v-if="sharePreview">

          <i class="el-icon-plus avatar-uploader-icon" v-else></i>
        </el-upload>
        <div class="cdn-del" v-if="form.activityInfoPic">
          <el-button @click="handleDeleteClick('share')" type="primary">删除</el-button>
        </div>
        <!-- <p class="cdn-info cdn-chart">提示：上传最大1MB，格式为：png、jpg、gif、bmp，分辨率80*80的正方形图片</p> -->
      </el-form-item>

      <el-form-item class="cdn-banner-upload" label="商品列表页banner：" prop="activityPic">
        <el-upload :before-upload="beforeAvatarUploadBanner" :http-request="handleHttpClickBanner" :on-success="handleAvatarSuccess" :show-file-list="false" action=""
          class="avatar-uploader">
          <img :src="bannerPreview" class="pr-preview-banner" v-if="bannerPreview">

          <i class="el-icon-plus avatar-uploader-icon" v-else></i>
        </el-upload>
        <div class="cdn-del" v-if="form.activityPic">
          <el-button @click="handleDeleteClick('banner')" type="primary">删除</el-button>
        </div>
        <!-- <p class="cdn-info cdn-banner">提示：上传最大1MB，格式为：png、jpg、gif、bmp，分辨率80*1920的图片</p> -->
      </el-form-item>

      <el-form-item label="商品角标文案：" prop="activityInfo">
        <el-input v-model="form.activityInfo"></el-input>
      </el-form-item>

      <el-form-item label="商品列表页描述：" prop="activityRemarks">
        <el-input type="textarea" v-model="form.activityRemarks" class="pr-textarea"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handelSaveClick('ruleForm')">保存并更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import urls from '@/api/urls'
import { getData, postData } from '@/api/'

export default {
  name: 'activityMtg',
  props: {},
  components: {},
  data() {
    return {
      sharePreview: '', // 预览
      bannerPreview: '', // 预览
      uploadFile: {}, // 上传banner FormData
      uploadFileShare: {}, // 上传share FormData
      form: {
        activityId: '',
        activityPic: '', // 商品列表页banner 上传地址 ---- 	商品对应图片 - 活动页使用
        activityInfo: '', // 商品角标文案
        activityInfoPic: '', // 登录页图片 缩率图 ---- 活动对应图片 ------ 登录页使用

        activityRemarks: '', // 商品描述
        createTime: new Date()
      },
      rules: {
        activityPic: [{ required: true, message: '请上传商品列表页banner', trigger: 'change' }],
        activityInfoPic: [{ required: true, message: '请上传登录页图片', trigger: 'change' }],
        activityInfo: [{ required: true, message: '请输入商品角标文案', trigger: 'blur' }],
        activityRemarks: [{ required: true, message: '请输入商品列表页描述', trigger: 'blur' }],
      }
    }
  },
  watch: {},
  created() {
    if (this.$route.params.id) {
      this.getDescribe()
    }
    console.log('this.$route.params-----------', this.$route.params.id)
  },
  mounted() {
    this.form.activityId = this.$route.params.id || 11
  },
  methods: {
    /**
     *@Description
     *@Return share 上传 - 上传前.
     **/
    beforeAvatarUploadShare(file) {
      this.beforeAvatarUpload(file, 'share')
    },
    /**
     *@Description
     *@Return banner 上传 - 上传前.
     **/
    beforeAvatarUploadBanner(file) {
      this.beforeAvatarUpload(file, 'banner')
    },
    /**
     *@Description
     *@Param
     *@Return banner 上传 - 上传前.
     **/
    beforeAvatarUpload(file, type) {
      const reader = new FileReader()
      reader.onload = (e) => {
        if (type === 'share') {
          this.sharePreview = e.currentTarget.result  // 获取到上传的文件地址 == 分享上传

        } else {
          this.bannerPreview = e.currentTarget.result // 获取到上传的文件地址 == banner 上传
        }
      }
      reader.readAsDataURL(file) // 此处会执行onload方法

      const isJPG = file.type === 'image/png' || 'image/jpg' || 'image/gif' || 'image/bmp'
      const isLt5M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('上传图片格式只能是png、jpg、gif、bmp!')
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }
      if (isJPG && isLt5M) {
        if (type === 'share') {
          this.uploadFileShare.file = file  // 得到上传file == 分享上传
        } else {
          this.uploadFile.file = file  // 得到上传file == banner 上传
        }
      }
      return isJPG && isLt5M
    },
    /**
     *@Description
     *@Param
     *@Return share = 图片 - 上传 - 函数.
     **/
    handleHttpClickShare() {
      this.handleHttpClick('share')
    },
    /**
     *@Description
     *@Param
     *@Return banner = 图片 - 上传 - 函数.
     **/
    handleHttpClickBanner() {
      this.handleHttpClick('banner')
    },
    /**
     *@Description
     *@Param
     *@Return 图片 - 上传 - 函数.
     **/
    handleHttpClick(type) {
      let formData = new FormData()

      if (type === 'share') {
        formData.append('file', this.uploadFileShare.file)
      } else {
        formData.append('file', this.uploadFile.file, 'banner.png')
      }
      postData(formData, urls.commonUploadUrl).then(response => {
        console.log('上传返回值-----', response)
        if (type === 'share') {
          this.form.activityInfoPic = response.result.url // 预览
          this.sharePreview = response.result.url

          console.log('上传返回值--this.form.activityInfoPic---', this.form.activityInfoPic)
        } else {
          this.form.activityPic = response.result.url // 预览
          this.bannerPreview = response.result.url
          console.log('上传返回值--this.form.activityInfoPic---', this.bannerPreview)
        }
        console.log('this.form---------', this.form)
        this.$message.success('上传成功！')

      }).catch(err => {
        this.$message.warning('上传失败！')
        console.log('上传失败返回值-----', err)
      })
    },
    /**
     *@Description
     *@Param
     *@Return banner 上传 - 上传成功 ===== 本次暂未使用到.
     **/
    handleAvatarSuccess(res, file) {
      console.log('上传成功返回值-----', res, file)
      // this.form.activityPic = URL.createObjectURL(file.raw)
    },
    /**
     *@Description
     *@Param
     *@Return 清空图片 重新上传.
     **/
    handleDeleteClick(e) {
      if (e === 'share') {
        this.sharePreview = ''
        this.form.activityInfoPic = ''
      } else {
        this.bannerPreview = ''
        this.form.activityPic = ''
      }
    },
    /**
     *@Description
     *@Return 保存 并更新 按钮事件监听.
     **/
    handelSaveClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.id = this.$route.params.id
          this.form.activityId = this.$route.params.id || 11
          postData(this.form, urls.savePicUrl).then(res => {
            this.$message.success('保存数据成功！')
            setTimeout(() => {
              this.$router.push({ name: 'ActivityList' })
            }, 1000)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    /**
     *@Description
     *@Return 获取活动id对应图片和说明信息.
     **/
    getDescribe() {
      getData({ id: this.$route.params.id }, urls.describeUrl).then(res => {
        if (res.code == 500) {
          this.$message.warning(res.message)
        } else {
          this.form = { ...res.result }
          this.sharePreview = res.result.activityInfoPic  //  登陆页使用
          this.bannerPreview = res.result.activityPic     //  活动页使用
        }
        // "activityId": 0,
        // "activityInfo": "string",
        // "activityInfoPic": "string",
        // "activityPic": "string",
        // "activityRemarks": "string",
        // "createTime": "2020-09-09 21:22:25",
        // "id": 1
        console.log('获取活动id对应图片和说明信息-------------', res)
      })
    }
  }
}

</script>
<style lang="scss" scoped="scoped">
::v-deep .avatar-uploader {
  width: 160px;
  height: 90px;
}
::v-deep .avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  border: 1px dashed #d9d9d9;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
// login
::v-deep .pr-login-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  line-height: 90px;
  text-align: center;
}
// login上传 图片 预览
::v-deep .pr-preview-login {
  display: block;
  width: 100%;
  height: 100%;
}
// banner
::v-deep .pr-banner-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
// 商品banner上传 图片 预览
::v-deep .pr-preview-banner {
  display: block;
  width: 160px;
  height: 90px;
}
/* 缩率图 提示 */
.cdn-chart {
  position: absolute;
  margin: -40px 0 0 276px;
}
/* 上传 */
::v-deep .el-upload {
  width: 160px;
  height: 90px;
  font-size: 30px;
  line-height: 90px;
  border: 1px solid #dcdcdc;
}
::v-deep .el-form-item__content {
  width: 160px;
  line-height: 0;
}
/* 上传图片 删除 */
.cdn-del {
  position: absolute;
  top: 0;
  display: none;
  width: 160px;
  height: 90px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  button {
    margin-top: 20px;
  }
}
.cdn-banner-upload .el-form-item__content:hover .cdn-del {
  display: block;
}
.pr-textarea {
  width: 600px;
  height: 400px;
  ::v-deep textarea {
    display: block;
    width: 100%;
    height: 100%;
  }
}
</style>
